<style lang="scss" scoped>
.rate_set_wrap {
    margin-bottom: 20px;
    width: 100%;
    .rate_set_item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        &.empty {
            line-height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #e5e5e5;
            width: 100%;
        }
        &.rate_set_header {
            font-weight: 550;
            font-size: 14px;
            color: #333;
            margin-bottom: 10px;
        }
        .rate {
            width: 200px; 
            .rate_box {
                display: flex;
                align-items: center;
                input {
                    text-align: left !important;
                }
            }
        }
        .time {
            flex: 1;
            display: flex;
            align-items: center;
            .tip {
                margin-left: 10px;
                display: flex;
                align-items: center;
                color: red;
                font-size: 12px;
                font-weight: normal;
            }
        }
    }
    .rate_set_main {
        max-height: 200px;
        overflow-y: auto;
        .rate_main {
            display: flex;
            align-items: center;
        }
    }
}
</style>

<template>
    <div class="rate_set_wrap">
        <div class="rate_set_header rate_set_item">
            <div class="rate">添加比例</div>
            <div class="time">
                适用时间区间
                <span class="tip">
                    <el-icon style="margin-right: 6px;"><Warning /></el-icon>
                    时间区间设置，不可重复
                </span>
            </div>
        </div>
        <div class="rate_set_main">
            <div class="rate_set_item empty" v-if="!formData.rateList.length">
                暂无数据
            </div>
            <el-form
                label-width="0px"
                :rules="rules"
                ref="formRef"
                :inline="true"
                :model="formData"
            >
                <div
                    class="rate_set_item"
                    v-for="(item, index) in formData.rateList"
                    :key="index"
                >
                    <div class="rate">
                        <el-form-item
                            :prop="'rateList.' + index + '.rate'"
                            :rules="{
                                required: true,
                                message: '请输入比例',
                                trigger: 'blur',
                            }"
                        >   
                            <div class="rate_box">
                                <el-input-number v-model="item.rate" :precision="2" :controls="false" placeholder="请输入比例" clearable/>
                                <span style="margin-left: 10px">%</span>
                            </div>
                            
                        </el-form-item>
                    </div>
                    <div class="time">
                        <el-form-item
                            :prop="'rateList.' + index + '.times'"
                            :rules="{
                                required: true,
                                validator: (...v) => handleValidatorTime(index, ...v),
                                type: 'array',
                                min: 2,
                            }"
                        >
                            <div class="rate_main">
                                <el-date-picker
                                    v-model="item.times"
                                    type="daterange"
                                    range-separator="-"
                                    style="width: 300px"
                                    value-format="YYYY-MM-DD"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                />
                                <el-popconfirm
                                    title="确认删除该比例设置?"
                                    @confirm="deleteItem(index)"
                                >
                                    <template #reference>
                                        <el-button style="margin-left: 20px" type="danger">删除</el-button>
                                    </template>
                                </el-popconfirm>
                            </div>
                            
                        </el-form-item>
                    </div>
                </div>
                
            </el-form>
        </div>
        <div class="rate_set_item">
            <el-button @click="addReateItem" :icon="Plus" type="primary">新增</el-button>
        </div>
    </div>
</template>

<script setup>
import { Warning, Plus } from "@element-plus/icons-vue";
import { reactive, watch } from "vue";
import useForm from "@/hooks/useForm";
import { DelPlatformRate } from '@/apis/platform'
import { ElMessage } from "element-plus";
import { judgeTimeHasRepate } from '@/utils/time'
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    }
});
const { formRef, search } = useForm();
const rules = {};
const formData = reactive({
    rateList: props.list || [],
});
watch(() => props.list, () => formData.rateList = props.list)
// 删除比例
const deleteItem = (index) => {
  const { id } = formData.rateList[index];
  if (!id) {
    formData.rateList.splice(index, 1);
    ElMessage({
      message: "删除成功",
      type: "success",
    });
  } else {
    DelPlatformRate(id).then((res) => {
      formData.rateList.splice(index, 1);
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    });
  }
};
const handleValidatorTime = (index, rule, value, cb) => {
    console.log('value: ', value);
    if (!value) return cb(new Error('请选择适用时间区间'))
    if (formData.rateList.length > 1) {
        for (let i = 0; i < formData.rateList.length; i ++) {
            if (i !== index) {
                if (judgeTimeHasRepate(value, formData.rateList[i].times)) {
                    return cb(new Error('和第一条，时间区间设置重复'))
                }
            }
        }
    }
    cb()
}
defineExpose({
    validate: () => new Promise((resolve, reject) => {
        formRef.value.validate((valid) => {
            // 表单校验成功
            if (valid) {
                // 判断时间段是否重复
                resolve()
            } else {
                reject()
            }
        })
    })
})
// 新增比例
const addReateItem = () => {
    formData.rateList.push({
        rate: undefined,
        times: [],
    });
};
</script>
